<template>
	<view class="app">
		<u-loading-page :loading="loading" bg-color="rgba(238, 238, 238, .5)">
		</u-loading-page>
		<!-- 内容区域 -->
		<view class="contentArea" v-if="!loading">
			<!-- 头部区域TableBar切换 -->
			<view class="headTableBar">
				<view>风险点</view>
				<!-- <view>风险源</view> -->
			</view>			
			<!-- /头部区域TableBar切换 -->

			<!-- 风险点总数 -->
			<view class="totalNumberOfRiskPoints">
				风险点总数：{{ echoesData.total }}
			</view>
			<!-- /风险点总数 -->

			<!-- 风险明细 -->
			<view class="riskDetails">
				<view class="item" v-for="item in echoesData.data" :key="item.riskLevel">
					<view class="number">{{ item.riskCount }}</view>
					<view class="riskName">{{ item.riskLevel }}</view>
				</view>
			</view>
			<!-- /风险明细 -->

			<!-- Echarts图表 -->
			<!-- <view class="charts-box">
				<qiun-data-charts 
					type="column"
					:opts="opts"
					:chartData="chartData"
				/>
			</view> -->
			<view style="width: 100%; height:700rpx;"><l-echart ref="myEcharts"></l-echart></view>
			<!-- /Echarts图表 -->
		</view>
		<!-- /内容区域 -->
	</view>
</template>

<script>
/**
 * 引入API接口
 * getRiskControlStatisticalColumnicChart：风险管控统计柱状图
 */
import { getRiskControlStatisticalColumnicChart } from "@/apis/risk/index.js"

// import * as echarts from 'echarts'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default {
	/**
	 * 定义数据
	 */
	data () {
		return {
			/* Echoes 数据 */
			echoesData: null,
			/* LoadingFLag */
			loading: false,
			chartData: {
				categories: [],
				chartData: []
			}
		}
	},

	/**
	 * 定义方法
	 */
	methods: {
		/* 风险管控统计柱状图 */
		async getRiskControlStatisticalColumnicChart () {
			this.loading = true;
			const res = await getRiskControlStatisticalColumnicChart()
			this.loading = false;
			this.echoesData = res
			let echartsData = {
				categories: [],
				series: []
			}
			res.data.map(item => {
				echartsData.categories.push(item.riskLevel);
				echartsData.series.push(item.riskCount)
			})
			// this.chartData = JSON.parse(JSON.stringify(echartsData));
			this.chartData = echartsData;

			this.$nextTick(() => {
				setTimeout(() => {
						let myEcharts = this.$refs.myEcharts
						let colors = ['#157ffb', '#ffce00', '#ff8a18', '#ff2d20' ]

						// 图表配置
						let option = {
							grid: {
								left: "15%"
							},
							xAxis: {
								type: 'category',
								data: this.chartData.categories
							},
							yAxis: {
								type: 'value'
							},
							series: [
								{

									itemStyle: {
											color: function(params) {
													//通过返回值的下标一一对应将颜色赋给柱子上
													return colors[params.dataIndex];
											}
									},
									label: {
										show: true,
										position: "top"
									},
									data: this.chartData.series,
									type: 'bar'
								}
							]
						}

						myEcharts.init(echarts, chart => {
							chart.setOption(option);
						});
				},1000)
			})
		}
	},

	/**
	 * Vue 创建钩子
	 */
	created () {
		/* 获取风险管控统计柱状图 */
		this.getRiskControlStatisticalColumnicChart()
	}
}
</script>

<style lang="scss" scoped>

  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }

	/* 内容区域 */
	.contentArea {
		height: 96vh;
		background: #FFFFFF;
		border-radius: 10rpx;
		
		.headTableBar {
			display: flex;
			align-items: center;
			justify-content: center;

			height: 77rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}
		/* 风险点总数 */
		.totalNumberOfRiskPoints {
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
			padding-left: 28rpx;
		}

		/* 风险明思 */
		.riskDetails {
			display: flex;
			margin-top: 50rpx;
			/* 每一项 */
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 4;
				/* 每一项的数字 */
				.number {
					font-size: 32rpx;
					font-weight: 400;
					color: #157FFB;
				}

				/* 每一项的名字 */
				.riskName {
					margin-top: 13rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>